<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>待办事项</title>
        <link rel="stylesheet" href="../css/bootstrap.css">
    </head>

    <body>
        
        <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">编号</th>
                <th scope="col">名称</th>
                <th scope="col">编辑</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>小明</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" 
                        data-target="#delete-modal">
                      删除
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#edit-modal">
                      编辑
                    </button>
                </td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>小明</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" 
                        data-target="#delete-modal">
                      删除
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#edit-modal">
                      编辑
                    </button>
                </td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>小明</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" 
                        data-target="#delete-modal">
                      删除
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#edit-modal">
                      编辑
                    </button>
                </td>
              </tr>
              <tr>
                <th scope="row">4</th>
                <td>小红</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" 
                        data-target="#delete-modal">
                      删除
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#edit-modal">
                      编辑
                    </button>
                </td>
              </tr>
              <tr>
                <th scope="row">5</th>
                <td>嘎子</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" 
                        data-target="#delete-modal">
                      删除
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#edit-modal">
                      编辑
                    </button>
                </td>
              </tr>
              <tr>
                <th scope="row">6</th>
                <td>小明</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" 
                        data-target="#delete-modal">
                      删除
                    </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal"
                        data-target="#edit-modal">
                      编辑
                    </button>
                </td>
              </tr>
            </tbody>
          </table>
          <nav aria-label="Page navigation example" class="page-main">
            <ul class="pagination">
              <li class="page-item disabled">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="page-item  active"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
    </body>
</html>